<template>
  <div class="data" style="height: 100vh;">
    <div class="data-title">
      <div class="title-left fl"></div>
      <div class="title-center fl">智能运维大屏</div>
      <div class="title-right fr"></div>
    </div>
    <div class="data-content">
      <div class="con-left fl">
        <div class="left-top">
          <div class="info">

            <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
            <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
            <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
            <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">

            <dv-active-ring-chart :config="config5" style="width:100%;height:100%; "/>

          </div>
          <div class="top-bottom">
            <div class="title">健康分</div>
            <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
            <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
            <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
            <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
            <dv-charts :option="option2"/>


          </div>
        </div>
        <div class="left-bottom">
          <div class="title">日志Top5</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">

          <dv-charts :option="option3" style="width:100%;height:80%"/>
        </div>
      </div>
      <div class="con-center fl">
        <div class="map-num">

          <div class="num">
          </div>
        </div>
        <div class="cen-top" id="map">
          <div class="cen-top" id="map">
            <div style="width:100%;height:100%" class="regional_table">
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="300">

                </el-table-column>
                <el-table-column prop="healthNum" label="健康评分" width="160">
                </el-table-column>
                <el-table-column prop="performance" label="性能评分" show-overflow-tooltip width="160">
                </el-table-column>
                <el-table-column prop="loadRating" label="负载评分" show-overflow-tooltip>
                </el-table-column>

              </el-table>
              <div style="margin-top: 20px">
                <el-button @click="saveData()" type="text" style="float: right; font-size: larger; color:#9fdcea;"
                           plain>保存
                </el-button>
              </div>

            </div>

          </div>

        </div>
        <div class="cen-bottom">
          <div class="title">运维经验</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <dv-charts :option="option2" style="width:100%;height:80%"/>
        </div>
      </div>
      <div class="con-right fr">
        <div class="right-top">
          <div class="title">健康分</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <dv-capsule-chart :config="config" style="width:100%;height:80%"/>
        </div>
        <div class="right-center">
          <div class="title">告警分布</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <dv-conical-column-chart :config="config5" style="width:100%;height:80%;"/>

        </div>
        <div class="right-bottom">
          <div class="title">CPU利用率</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <div>
            <el-progress type="circle" :percentage="value1" :width="80" :height="80"
                         style="margin-left: 50px;margin-right: 100px;"></el-progress>
            <el-progress type="circle" :percentage="value2" :width="80" :height="80"
                         style="margin-right: 50px;"></el-progress>
            <el-progress type="circle" :percentage="value3" :width="80" :height="80"
                         style="margin-right: 60px;"></el-progress>
            <el-progress type="circle" :percentage="value4" :width="80" :height="80"
                         style="margin-right: 60px;"></el-progress>
            <el-progress type="circle" :percentage="value5" :width="80" :height="80"></el-progress>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import {queryEcharts} from "@/api/system/analysisview"
import '../../../public/static/css/common.css'
import '../../../public/static/css/map.css'
import {queryData, updateData, queryAll} from "@/api/system/largeScreen"

export default {


  data() {
    return {
      config: {},
      config5: {},
      config3: {},
      option1: {},
      option2: {},
      option3: {},
      alarmNumOracle: 0,
      alarmNumMySql: 0,
      alarmNum: [],
      healthNum: [],
      memoryNum: [],
      problemNumOracle: 0,
      problemNumMySql: 0,
      problemNum: [],
      //1
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      value5: 0,
      name: [],
      tableData: [],
      ttData: [],
      queryForm: {
        /* 查询条件 */
        org: "",
        appsystem: "",
        database: "",
        example: "",
        follow: "",
        warningLevel: [],
        time: "",
        tbId: 1,
      },
      echartsData: []
    }
  },
  created() {

  },
  mounted() {
    this.initData()
    this.queryAllClick();

  },
  methods: {
    async initData() {
      const {data} = await queryEcharts(this.queryForm)
      this.echartsData = data
      this.handleConfig5(data.echart0)
      this.handleOption1(data.echarts3)
      this.handleOption2(data.echarts4)
      this.handleOption3(data.echarts5)
      this.handleTableData(data)
    },
    handleTableData(data){

      const data1=data.echarts3
      const data2=data.echarts4
      const data3=data.echarts5

      data1.forEach(element => {
        this.tableData.push({
          name: element.x,
          healthNum: element.y,
        })
      })
      data2.forEach(x=>{
        this.tableData.forEach(b=>{
          if (x.x===b.name){
            b["performance"]=x.y
          }
        })
      })

      data3.forEach(x=>{
        this.tableData.forEach(b=>{
          if (x.x===b.name){
            b["loadRating"]=x.y
          }
        })
      })

      this.tableData=this.tableData.splice(0,9)
    },
    handleOption3(data){
      this.option3 = {

        xAxis: {
          data: 'value',
          min: 0,
        },
        yAxis: {
          data: data.map(x=>x.x).slice(0,5)
        },
        series: [
          {
            data: data.map(x=>x.y*1).slice(0,5),
            type: 'bar',
            animationCurve: 'easeOutBack'
          }
        ],
        grid: {
          left: '3%',
          right: '3%',
          top: '8%',
          containLabel: true
        },
      }
    },
    handleOption2(data){
      this.option2 = {
        legend: {
        },
        xAxis: {
          data: data.map(x=>x.x),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          data: 'value'
        },
        series: [
          {
            name: 'Oracle',
            data: data.map(x=>x.y*1),
            type: 'line',
            stack: 'a',
            fill: {
              show: true
            }
          }
        ],
        grid: {
          left: '3%',
          right: '3%',
          top: '8%',
          containLabel: true
        },
      }
    },
    handleOption1(data) {
      this.$nextTick(() => {
        this.option1 = {
          xAxis: {
            data: data.map(x => x.x),
            nameTextStyle: {
              fill: '#fff'
            },
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 6, // 刻度标签与轴线之间的距离
            },
          },
          yAxis: {
            data: 'value'
          },
          series: [
            {
              data: data.map(x => x.y*1),
              type: 'line',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              }
            }
          ],

        }
      })
    },
    handleConfig5(data) {

      const arr = []

      data.forEach(x => {

        arr.push({
          name: x.analy_source,
          value: x.ct
        })
      })

      this.config5 = {
        data: arr,
        digitalFlopToFixed: 2,
      }


    },
    handleSelectionChange(selection) {
      this.ttData = []
      this.$nextTick(() => {
        selection.forEach(sel => {
          this.ttData.push(sel.name)
        })

      })

    },
    saveData() {
      this.alarmNum = []
      this.healthNum = []
      this.memoryNum = []
      this.tableData = []
      // console.log()
      updateData(this.ttData).then(resp => {
        this.queryAllClick();


      })
      // this.$nextTick(()=>{
      //         window.location.reload()
      //     })

    },
    queryAllClick() {
      // queryAll().then(resp => {
      //   this.tableData = []
      //   resp.data.forEach(element => {
      //
      //     this.tableData.push({
      //       name: element.name,
      //       healthNum: element.health_score,
      //       performance: element.performance_rating,
      //       loadRating: element.load_rating
      //     })
      //   })
      // })
      queryData().then(resp => {

        resp.data.forEach(element => {
          if (element.type == 'Oracle') {
            this.alarmNumOracle = element.alarm_num + this.alarmNumOracle
            this.problemNumOracle = element.problem_num + this.problemNumOracle
          } else if (element.type == 'MySql') {
            this.alarmNumMySql = element.alarm_num + this.alarmNumMySql
            this.problemNumMySql = element.problem_num + this.problemNumMySql
          }
          this.name.push(element.name)
          this.healthNum.push({name: element.name, value: element.health_score})
          this.memoryNum.push({name: element.name, value: element.memory_rate})

        });
        if (resp.data.length == 0) {
        } else if (resp.data.length == 1) {
          this.value1 = resp.data[0].cpu_rate
        } else if (resp.data.length == 2) {
          this.value1 = resp.data[0].cpu_rate
          this.value2 = resp.data[1].cpu_rate
        } else if (resp.data.length == 3) {
          this.value1 = resp.data[0].cpu_rate
          this.value2 = resp.data[1].cpu_rate
          this.value3 = resp.data[2].cpu_rate
        } else if (resp.data.length == 4) {
          this.value1 = resp.data[0].cpu_rate
          this.value2 = resp.data[1].cpu_rate
          this.value3 = resp.data[2].cpu_rate
          this.value4 = resp.data[3].cpu_rate
        } else if (resp.data.length >= 5) {
          this.value1 = resp.data[0].cpu_rate
          this.value2 = resp.data[1].cpu_rate
          this.value3 = resp.data[2].cpu_rate
          this.value4 = resp.data[3].cpu_rate
          this.value5 = resp.data[4].cpu_rate
        }

        this.config = {
          data: this.healthNum
        }

        // this.config5 = {
        //   data: this.healthNum,
        //   digitalFlopToFixed: 2,
        // }
        this.alarmNum.push(this.alarmNumOracle)
        this.alarmNum.push(this.alarmNumMySql)
        this.problemNum.push(this.problemNumOracle)
        this.problemNum.push(this.problemNumMySql)

      })
    }


  }
}
</script>

<style scoped>
/*最外层透明*/
/* 表格内背景颜色 */
/*最外层透明*/
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
  color: white;
}

/* 表格内背景颜色 */
.regional_table /deep/ .el-table th,
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  color: white;
}


</style>
